import React, { Component, Fragment } from 'react';
import XjjItem from './components/xjjItem';
import Header from './components/header';
import axios from 'axios'
class Xiaojiejie extends Component {
    constructor(props) {
        super(props)

        this.state = {
            inputVal: '',
            list: [
                '基础按摩',
                '精油推背',
                '牛奶泡脚'
            ]
        }

        this.deleteItem = this.deleteItem.bind(this)
        this.inputChange = this.inputChange.bind(this)
        this.addChange = this.addChange.bind(this)
    }

    componentDidMount() {
        axios.post('https://www.fastmock.site/mock/2a1a23ab4c8771a1ed10e2a5991f1cd5/blogdata/jiejie/getdata')
            .then((res) => {
                console.log('axios获取数据成功' + JSON.stringify(res));
            })
            .catch((error) => {
                console.log('axios获取数据失败' + error);
            })
    }

    render() {
        // console.log('挂载中');
        return (
            <>
                {/* <div>
                    <label htmlFor="serve">增加服务：</label>
                    <input id="serve" value={this.state.inputVal} onChange={this.inputChange} type="text" />
                    <button onClick={this.addChange.bind(this)}>增加服务</button>
                </div> */}
                <Header
                    inputChange={this.inputChange}
                    addChange={this.addChange}
                    val={this.state.inputVal}>
                </Header>
                <ul ref={(ul) => { this.ul = ul }}>
                    {this.state.list.map((item, index) => {
                        return (
                            // <li key={index + item}
                            //     onClick={this.deleteItem.bind(this, index)}
                            //     dangerouslySetInnerHTML={{ __html: item }} //该属性可以让我们在文本框中写入的标签被识别并生效
                            // ></li>
                            <XjjItem
                                content={item}
                                key={index + item}
                                index={index}
                                deleteItem={this.deleteItem}>
                            </XjjItem>
                        )
                    })}
                </ul>
            </>
        )
    }

    inputChange(e) {
        this.setState({
            inputVal: e
        })
    }

    // 增加列表
    addChange() {
        this.setState({
            list: [...this.state.list, this.state.inputVal],
            inputVal: ''
        }, () => {
            // setState是异步执行的,这里使用回调函数打印每次添加元素后元素的长度(个数)
            // 如果不使用回调函数，写在外面，则每次打印都会小1
            console.log(this.ul.querySelectorAll('li').length);
        })
    }

    // 删除列表
    deleteItem(index) {
        // console.log(index);
        let list = this.state.list;
        list.splice(index, 1)
        this.setState({
            list: list
        })
    }
}

export default Xiaojiejie